import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

import 'package:get/get.dart';
import 'package:xiaomi_shop/app/api/api.dart';
import 'package:xiaomi_shop/app/modules/shop/controllers/shop_detail_controller.dart';
import 'package:xiaomi_shop/app/services/screenAdapter.dart';
import 'package:xiaomi_shop/models/shopModel.dart';

class ShopDetailRecommendView extends GetView {
  @override
  final ShopDetailController controller = Get.find();
  ShopDetailRecommendView({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
        key: controller.globalKey3,
        width: ScreenAdapter.width(1080),
        padding: EdgeInsets.fromLTRB(
            ScreenAdapter.width(30), 0, ScreenAdapter.width(30), 0),
        child: Obx(() =>
            // 瀑布流商品列表
            MasonryGridView.count(
              crossAxisCount: 2,
              mainAxisSpacing: ScreenAdapter.width(20),
              crossAxisSpacing: ScreenAdapter.width(20),
              itemCount: controller.bestShopList.length,
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true, // 元素根据实际内容设置大小
              itemBuilder: (context, index) {
                ShopModel model = controller.bestShopList.value[index];
                return GestureDetector(
                  onTap: () {
                    Get.toNamed('/shopDetail', arguments: {"id": model.id});
                  },
                  child: Container(
                    padding: EdgeInsets.all(ScreenAdapter.width(20)),
                    decoration: BoxDecoration(
                        color: const Color.fromRGBO(246, 246, 246, 1),
                        borderRadius:
                            BorderRadius.circular(ScreenAdapter.width(16))),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Image.network("${Api.basicUrl}/${model.s_pic}"),
                        SizedBox(
                          height: ScreenAdapter.height(16),
                        ),
                        Text(
                          model.title!,
                          style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(38),
                              fontWeight: FontWeight.bold,
                              overflow: TextOverflow.ellipsis),
                          maxLines: 2,
                        ),
                        Text(
                          model.sub_title!,
                          style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(30),
                              overflow: TextOverflow.ellipsis),
                          maxLines: 1,
                        ),
                        Text("¥ ${model.price}",
                            style: TextStyle(
                                fontSize: ScreenAdapter.fontSize(38),
                                fontWeight: FontWeight.bold)),
                      ],
                    ),
                  ),
                );
              },
            )));
  }
}
